<template>
  <div class="goods-comment-container auto-height-container">
    <vab-query-form>
      <el-form inline :model="queryForm" @submit.prevent>
        <el-form-item label="用户手机号">
          <el-input v-model="queryForm.keyword" clearable placeholder="请输入用户手机号进行查询" />
        </el-form-item>
        <el-form-item>
          <el-button :icon="Search" :loading="listLoading" native-type="submit" type="primary"
            @click="queryData">查询</el-button>
        </el-form-item>
      </el-form>
    </vab-query-form>

    <el-table ref="tableRef" v-loading="listLoading" border :data="list">
      <el-table-column type="selection" width="38" />
      <el-table-column align="center" label="序号" width="55">
        <template #default="{ $index }">
          {{ $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="用户ID" min-width="180" prop="_id" show-overflow-tooltip />
      <el-table-column align="center" label="注册时间" min-width="120" prop="Creationtime" show-overflow-tooltip sortable />
      <el-table-column align="center" label="用户身份" min-width="100">
        <template #default="{ row }">
          <el-tag effect="dark" :type="row.userType === 0 ? 'success' : 'warning'">
            {{ row.userType === 0 ? '普通用户' : '搭子用户'}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="用户名(手机号)" min-width="160" prop="account" />
      <el-table-column align="center" label="操作" width="150">
        <template #default="{ row }">
          <el-button text type="primary" @click="handleEdit(row)">查看详情</el-button>
          <el-button text type="danger" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty class="vab-data-empty" description="暂无数据" />
      </template>
    </el-table>
    <vab-pagination :current-page="queryForm.page" :page-size="queryForm.pageSize" :total="total"
      @current-change="handleCurrentChange" @size-change="handleSizeChange" />
    <el-dialog v-model="dialogVisible" title="用户详情" width="700">
      <el-form label-width="auto" style="max-width: 600px">
        <el-form-item label="头像">
          <img v-if="userDetails" :src="userDetails.avatar" class="avatar" />
        </el-form-item>
        <el-form-item label="id">
          <span>{{userDetails._id || ''}}</span>
        </el-form-item>
        <el-form-item label="创建时间">
          <span>{{userDetails.Creationtime || ''}}</span>
        </el-form-item>
        <el-form-item label="手机号">
          <span>{{userDetails.account || ''}}</span>
        </el-form-item>
        <el-form-item label="用户类型">
          <span>{{userDetails.userType === 0 ? '普通用户' : '搭子用户'}}</span>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="uploadSwiper">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
  import { Delete, Search } from '@element-plus/icons-vue'
  import { doDelete, getList } from '/@/api/goodsComment'
  import { getUserLists, UserDetails } from '/@/api/newPagesApi'

  defineOptions({
    name: 'GoodsComment',
  })

  const $baseConfirm = inject<any>('$baseConfirm')
  const $baseMessage = inject<any>('$baseMessage')
  const editRef = ref<any>(null)
  const tableRef = ref<any>(null)
  const list = ref<any>([])
  const listLoading = ref<boolean>(true)
  const dialogVisible = ref(false)
  const total = ref<any>(0)
  const selectRows = ref<any>([])
  const userDetails = ref<any>({})
  const queryForm = reactive<any>({
    keyword: '',//用户手机号
    page: 1,
    pageSize: 20,
  })

  const fetchData = async () => {
    listLoading.value = true
    const { data } = await getUserLists(queryForm)
    list.value = data.data
    total.value = data.total
    listLoading.value = false
  }

  const handleSizeChange = (value : number) => {
    queryForm.page = 1
    queryForm.pageSize = value
    fetchData()
  }

  const handleCurrentChange = (value : number) => {
    queryForm.page = value
    fetchData()
  }

  const queryData = () => {
    queryForm.page = 1
    fetchData()
  }

  //获取用户详情
  const handleEdit = async (row = {}) => {
    try {
      if (!row._id) $baseMessage('用户id为空！', 'error', 'hey')

      dialogVisible.value = true;

      const { data } = await UserDetails({
        id: row._id
      });

      userDetails.value = data;
    } catch (err) {
      console.log(err);
    }
    // editRef.value.showEdit(row)
  }

  const handleDelete = (row : any) => {
    if (row.id) {
      $baseConfirm('您确定要删除当前项吗', null, async () => {
        const { msg } : any = await doDelete({ ids: row.id })
        $baseMessage(msg, 'success', 'hey')
        await fetchData()
      })
    } else {
      if (selectRows.value.length > 0) {
        const ids = selectRows.value.map((item : { id : any }) => item.id).join()
        $baseConfirm('您确定要删除选中项吗', null, async () => {
          const { msg } : any = await doDelete({ ids: ids })
          $baseMessage(msg, 'success', 'hey')
          await fetchData()
        })
      } else {
        $baseMessage('您未选中任何行', 'warning', 'hey')
      }
    }
  }

  onActivated(() => {
    tableRef.value.doLayout()
  })

  onBeforeMount(() => {
    fetchData()
  })
</script>
<style scoped>
  .avatar {
    width: 110px;
    height: 110px;
    display: block;
  }
</style>
